<template>
  <div class="container-fluid px-0 flex-shrink-0">
    <global-header :user="user"></global-header>
    <loader
      v-if="loading"
      text="拼命加载中"
      backgroundColor="rgba(0,0,0,.7)"
    ></loader>
    <router-view :key="route.path"></router-view>
  </div>
  <footer class="text-center py-4 text-secondary bg-light mt-auto">
    <small>
      <ul class="list-inline mb-0">
        <li class="list-inline-item">斩</li>
        <li class="list-inline-item">首</li>
        <li class="list-inline-item">的</li>
        <li class="list-inline-item">白</li>
        <li class="list-inline-item">夜</li>
      </ul>
    </small>
  </footer>
</template>

<script lang='ts'>
import { defineComponent, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps } from './store'
import 'bootstrap/dist/css/bootstrap.min.css'
import GlobalHeader from './components/GlobalHeader.vue'
import Loader from './components/Loader.vue'
import createMessage from './components/createMessage'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'App',
  components: {
    GlobalHeader,
    Loader
  },
  setup () {
    const store = useStore<GlobalDataProps>()

    const route = useRoute()

    const user = computed(() => {
      return store.state.user
    })

    const loading = computed(() => {
      return store.state.loading
    })

    const error = computed(() => {
      return store.state.error
    })

    watch(
      () => error.value.status,
      () => {
        const { status, message } = error.value
        if (status && message) {
          createMessage('error', message, 2000)
        }
      }
    )

    return {
      user,
      loading,
      error,
      route
    }
  }
})
</script>

<style>
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-left: var(--bs-gutter-x, 1rem);
  padding-right: var(--bs-gutter-x, 1rem);
}

.max-w-330 {
  max-width: 330px;
}

.ib {
  display: inline-block;
}
</style>
